<template>
  <div>
    <el-card>
      <p>补料单列表</p>
      <div class="searchArea">
        <el-form ref="searchForm"
                 :inline="true"
                 :model="searchForm"
                 label-position="left">
          <el-form-item label="制造商：">
            <el-select v-model="searchForm.value"
                       placeholder="请选择">
              <el-option v-for="item in AllSlist"
                         :key='item.id'
                         :label="item.menuName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制造商料号：">
            <el-input v-model="searchForm.productCode"
                      placeholder="请输入制造商料号"
                      ></el-input>
          </el-form-item>

          <el-form-item label="审批状态">
            <el-select v-model="searchForm.status"
                       placeholder="请选择">
              <el-option v-for="item in AllStatuslist2"
                         :key='item.id'
                         :label="item.menuName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>

           <el-form-item label="创建时间"
                        prop="timeRange">
            <el-date-picker v-model="searchForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type='primary'
                       @click="getMakeUpList">搜索</el-button>
          </el-form-item>
          <el-button type='primary'
                       @click="dialogFormVisible=true">导出</el-button>
        </el-form>
      </div>
      <div class="tableBox">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="500"
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="orderNum" label="补料单号" align="center"></el-table-column>
          <el-table-column prop="productManuNum" label="制造商料号" align="center"></el-table-column>
          <el-table-column prop="meunName" label="制造商" align="center"></el-table-column>
          <el-table-column prop="stock" label="数量（个）" align="center"></el-table-column>
          <!--<el-table-column prop="createTime" label="申请时间" align="center"></el-table-column>-->
          <el-table-column prop="createTime" label="交货时间" align="center"></el-table-column>
          <!-- <el-table-column prop="locked" label="是否入库" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-show="scope.row.status==2">入库</el-tag>
              <el-tag type="danger" v-show="scope.row.status==0">出库</el-tag>
            </template>
          </el-table-column> -->
         
         
          <el-table-column prop="price" label="补料单价(￥)" align="center"></el-table-column>
          <el-table-column prop="tax" label="税金13%(￥)" align="center"></el-table-column>
          <el-table-column prop="askAccount" label="提交人" align="center"></el-table-column>
        
          <el-table-column prop="status" width="140"
                       label="审批状态"
                       align="center">
            <template slot-scope="scope">
              <el-tag type="success"
                      v-show="scope.row.status==1">已审批</el-tag>
              <el-tag type="success"
                      v-show="scope.row.status==0">待审批</el-tag>
              <el-tag type="danger"
                      v-show="scope.row.status==2">已婉拒</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作"  align="center" fixed="right" width="220">
            <template slot-scope="scope" >
              <el-button type="primary" :disabled="scope.row.status!=0" size="mini" @click="agreeApply(scope.row)">同意</el-button>
              <el-button type="danger" :disabled="scope.row.status!=0" size="mini" @click="refuseApply(scope.row)">打回</el-button>
              <el-button type="primary" size="mini" @click="detail(scope.row)">详情</el-button>
             </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="40%">
      <el-form
        ref="detailForm"
        :model="detailForm"
        label-position="right"
        label-width='170px'
        style="width:100%"
      >
        <el-form-item label="制造商料号：">
          <el-input v-model="detailForm.productManuNum" clearable disabled style="width:65%"></el-input>
        </el-form-item>
         <el-form-item label="制造商：">
          <el-input v-model="detailForm.meunName" disabled style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="AKS料号：">
          <el-input v-model="detailForm.aksNum" disabled style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="单价(￥)：">
          <el-input v-model="detailForm.price" disabled style="width:65%"></el-input>
        </el-form-item> 
        <el-form-item label="美金单价($)：">
          <el-input v-model="detailForm.dollar" disabled style="width:65%"></el-input>
        </el-form-item>      
        <el-form-item label="税金(￥)：">
          <el-input v-model="detailForm.price" disabled style="width:65%"></el-input>
        </el-form-item>  
        <el-form-item label="购买数量(个)：">
          <el-input v-model="detailForm.stock" disabled style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="交货日期：">
          <el-input v-model="detailForm.dealTime" disabled style="width:65%"></el-input>
        </el-form-item>
        
        <el-form-item label="备注：">
          <el-input v-model="detailForm.memo" disabled style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="审批状态：">
          <el-input v-model="detailForm.status" disabled style="width:65%"></el-input>
        </el-form-item>
        <el-form-item label="是否入库："> 
          <el-input v-model="detailForm.inStore" disabled style="width:65%"></el-input>
        </el-form-item>
        
        <el-form-item label="入库数量(个)："> 
          <el-input v-model="detailForm.inStoreNum" disabled style="width:65%"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <div style="text-align:center">
            <el-button @click="dialogVisible = false">返回</el-button>
          </div>
      </span>
    </el-dialog>
    <el-dialog title="导出补料单" :visible.sync="dialogFormVisible">
      <el-form :model="downLoadForm">
  
       <el-form-item label="制造商：">
            <el-select filterable v-model="downLoadForm.value"
                       placeholder="请选择">
              <el-option v-for="item in AllSlist"
                         :key='item.id'
                         :label="item.menuName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审批状态">
            <el-select v-model="downLoadForm.statusValue"
                       placeholder="请选择">
              <el-option v-for="item in AllStatuslist"
                         :key='item.id'
                         :label="item.menuName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间"
                        prop="timeRange">
            <el-date-picker v-model="downLoadForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="downLoadData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  PRODUCT_MAKEUP_LIST,PRODUCT_MAKEUP_AGREE,PRODUCT_MAKEUP_REFUSE,SUPPLIER_ALLLIST,MAKEUP_DOWNLOAD
} from '@/utils/api';
import { formatDate } from '@/utils/validate.js';
export default {
  data() {
    return {
      AllStatuslist: [
          { id: 0, menuName: "待审批" },
          { id: 1, menuName: "已审批" },
          { id: 2, menuName: "已婉拒" }
        ],
    AllStatuslist2: [
          { id: 0, menuName: "待审批" },
          { id: 1, menuName: "已审批" },
          { id: 2, menuName: "已婉拒" }
        ],
      timeRange:[],
      value:"",
      downLoadForm:{
        timeRange: [new Date().getTime()-2592000000,new Date().getTime()+86400000],
        value:null,
        statusValue:null,
        isHandle:false,
        timeRange:[],
         AllSlist: [
          { id: 1, menuName: "傲然" },
          { id: 2, menuName: "咩咩" },
          { id: 3, menuName: "mc" },
          { id: 4, menuName: "lulu" }
        ]
      },
      detailForm:[],
      AllSlist:[],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      searchForm: {
        timeRange: [new Date().getTime()-2592000000,new Date().getTime()+86400000],
        value:null,
        aksNum:''
      },
      supplementForm: {
        // orderNum: "12312",
        // aksNum: "AKS13jj3124",
        // productManuNum: "2335451",
        // meunId: "BMW",
        // memo: "sfds423g23g",
        // productAddress:"",
        // unit: "xxx",
        // stock: "100",
        // price: "10",
        // dealTime: "2019/11/30"
      },
      downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      tableData: [
       
      ],
      currentPage: 1,
      pageSize: 10,
      total: 50,
      dialogVisible: false
    };
  },
  created () {
    this.getMakeUpList()
    this.getAllList ()
  },
  methods: {
    downLoadData(){
      MAKEUP_DOWNLOAD({
        menuId: this.downLoadForm.value,
        startTime:Math.floor(new Date(this.searchForm.timeRange[0]).getTime()/1000),
        endTime:Math.floor(new Date(this.searchForm.timeRange[1]).getTime()/1000),
        status:this.downLoadForm.statusValue,
        userRange:2
      }).then(res => {
        console.log(res.data)
        var url = this.downloadUrl + res.data
        location.href = url
        this.dialogFormVisible = false
      })
    },
 
    detail(row){
      this.detailForm= Object.assign({}, row)

      console.log(this.detailForm,"jsw-row")

      if(this.detailForm.status==0){
        this.detailForm.status="待审批"
      }else if(this.detailForm.status == 1){
        this.detailForm.status="已审批"
      }else{
          this.detailForm.status="已婉拒"
      }

      if(this.detailForm.inStore==0){
        this.detailForm.inStore="待入库"
      }else{
          this.detailForm.inStore="已入库"
      }
       
      this.dialogVisible=true
    },
     getAllList () {
      SUPPLIER_ALLLIST().then(res => {
        this.AllSlist = res.data
        console.log(this.AllSlist)
      })
    },
     // 同意
    agreeApply (_scopes) {
      this.$confirm(
          '是否同意, 是否继续?',
        {
          type: 'warning',
          center: true
        }
      )
        .then(() => {
          PRODUCT_MAKEUP_AGREE({ 
          id: _scopes.id,
        }).then(res => {
          this.$message.success('操作成功') // 操作成功
            this.getMakeUpList()
        })
        })
        .catch(() => {
          this.$message.info('取消操作') // 取消操作
        })
    },
    refuseApply (_scopes) {
      this.$confirm(
          '是否拒绝, 是否继续?',
        {
          type: 'warning',
          center: true
        }
      )
        .then(() => {
          PRODUCT_MAKEUP_REFUSE({ 
          id: _scopes.id,
	        }).then(res => {
	          this.$message.success('操作成功') // 操作成功
	             this.getMakeUpList()
	        })
        })
        .catch(() => {
          this.$message.info('取消操作') // 取消操作
        })
    },
    getMakeUpList(){
      console.log("搜索",this.searchForm)
      PRODUCT_MAKEUP_LIST({ 
          productCode:this.searchForm.productCode,
          menuId:this.searchForm.value,
          status : this.searchForm.status,
          startTime:Math.floor(new Date(this.searchForm.timeRange[0]).getTime()/1000),
          endTime:Math.floor(new Date(this.searchForm.timeRange[1]).getTime()/1000),
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          pageFlag:1
      }).then(res => {
          this.tableData = res.data.dataList
          this.total = res.data.count
          for (let i in this.tableData) {
            this.tableData[i].createTime = this.formatSecond(this.tableData[i].createTime)
             this.tableData[i].dealTime = this.formatSecond(this.tableData[i].dealTime)
          }
      })
        
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val
      this.getMakeUpList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
      this.getMakeUpList()
    },
        //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
</style>